<!DOCTYPE HTML /> 
<%@LANGUAGE="JAVASCRIPT" %>
<!--#include file ="Includes/DB.asp"--> <!-- Namespace: DB -->
<!--#include file ="Includes/JSON2.asp"-->
<!--#include file ="Includes/ASPHelpers.asp"--> <!-- Namespace: Helpers -->
<!--#include file ="AdminScriptEditorModel.asp"-->
 

<% 
	var model = new AdminScriptEditorModel();
	model.Init();

	var showNeedsSaved = ((model.ScriptID != "new" && model.ScriptID != "") ? "hidden" : "");

%>


<html xmlns="http://www.w3.org/1999/xhtml">
<% Response.AddHeader("X-UA-Compatible", "IE=edge"); %>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Script Editor</title>
	<link rel="stylesheet" type="text/css" href="Content/Styles/jqueryUI/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="Content/Styles/AfterHours.css">
	<link rel="stylesheet" type="text/css" href="Content/Styles/AdminScriptEditor.css">
	<link rel="stylesheet" type="text/css" href="Content/Styles/jQueryUIOverrides.css" />


</head>

<body>


<!-- MENU -->
<div class="scriptMenu">
	<button class="scriptMenuItem" menu="file">
    	File
    </button>
	<button class="scriptMenuItem" menu="tools">
    	Tools
    </button>
    
    <span class="needsSaved <%= showNeedsSaved %>">(Needs Saved)</span>
</div>

<!-- DROPDOWNS -->
<!-- FILE DROPDOWN -->
<div class="scriptMenuItemDropDown" menu="file">
	<ul>
    	<li class="optNew divider">
			<span class="ui-icon ui-icon-document"></span>
        	<span class="menuLabel">New</span>
        </li>
    	<li class="optOpen divider">
        	<span class="ui-icon ui-icon-folder-open"></span>
        	<span class="menuLabel">Open...</span>
        </li>
    	<li class='optSave divider'>
        	<span class="ui-icon ui-icon-disk"></span>
        	<span class="menuLabel">Save</span>
        </li>
        <li class='optPreview divider'>
        	<span class="ui-icon ui-icon-note"></span>
        	<span class="menuLabel">Preview</span>
        </li>
        <li class='optImport'>
        	<span class="ui-icon ui-icon-arrowreturnthick-1-e"></span>
        	<span class="menuLabel">Import...</span>
        </li>
        <li class='optExport'>
        	<span class="ui-icon ui-icon-arrowreturnthick-1-w"></span>
        	<span class="menuLabel">Export</span>
        </li>
    </ul>
</div>

<!-- TOOLS DROPDOWN -->
<div class="scriptMenuItemDropDown" menu="tools">
	<ul>
    	<li class="optScriptManager divider">
			<span class="ui-icon ui-icon-gear"></span>
        	<span class="menuLabel">Script Manager</span>
        </li>
    </ul>
</div>

<!-- /MENU -->

<h1 class="pageTitle">Script Editor</h1>


<!-- CATEGORY AND TITLE -->
<span id="categorySection">
	<label>
    	Script Category:
    </label>
    <br/>
    <input type="text" id="txtScriptCategory" value="<%= model.Category %>" />
    <button id="btnScriptCategoryArrow" class="ui-icon ui-icon-triangle-1-s"></button>
</span>

<span id="titleSection" class="titleOK">
	<label>
    	Script Title:
    </label>
    <label id="titleErrorMsg"></label>
    <br/>
    <input type="text" id="txtScriptTitle" originalvalue="<%= model.Title %>" value="<%= model.Title %>" />
    <span class="generalIcons statusIcon"></span>
</span>
<!-- /CATEGORY AND TITLE -->

<br>

<!-- CATEGORY DROPDOWN -->
<%
    var html = [
        "<div id='categoryList'>",

            "<div id='applianceLabel' class='categoryHeader'>",
                "<span id='applianceExpand' class='ui-icon ui-icon-circlesmall-plus'></span>",
                "<label>",
					"Appliances:",
				"</label>",
            "</div>",
            "<ul id='categoryApplianceList'>"
    ];

    for(var x = 0, len = model.Appliances.length; x < len; x++){
        var curAppliance = model.Appliances[x];
        html.push(
            "<li val='", curAppliance, "'>",
                "<span>", curAppliance, "</span>",
            "</li>"
        );
    }
    
    html.push(
		"</ul>",
		"<div class='categoryHeader'>",
			"<label>",
				"Existing Categories:",
			"</label>",
		"</div>",
		"<ul>"
    );
    
    for(var x = 0, len = model.Categories.length; x < len; x++){
        var curCategory = model.Categories[x];
        html.push(
            "<li val='", curCategory, "'>",
                "<span>", curCategory, "</span>",
            "</li>"
        );
    }
    
    html.push(
            "</ul>",
        "</div>"
    );
    
    Response.Write(html.join(""));  
   
%>


<!-- /CATEGORY DROPDOWN -->

<div id="content" scriptid="<%= model.ScriptID %>">
	<div class="scriptBlock" scriptblockid="<%= model.InitialScriptBlock.ScriptBlockID %>" parentdecisionid="<%= model.InitialScriptBlock.DecisionID %>">
        <label>Text:</label>
        <div class="scriptBlockMenu">
			<button class="btnEdit">
            	<span class="UIicons editIcon"></span>
                Edit
            </button>
            <button class="btnSave hidden">
            	<span class="generalIcons saveIcon"></span>
                Save
            </button>
            <button class="btnExit hidden" >
            	Exit Edit Mode
                <span class="generalIcons cancelIcon"></span>
            </button>
            <span class="needsSaved hidden">(Needs Saved)</span>
		</div>
        <div class="scriptText">
            <%= model.InitialScriptBlock.ScriptText %>
        </div>
		<br>
        <div class="decisionBlock">
            <span class="decisionBlockLabelExpandCollapse iconExpandCollapse decisionBlockLabelCollapse"></span>
            <label class="decisionBlockLabel">Decisions:</label>            
            <ul class="scriptDecisions">
                <%
                    var html = [];
                    for(var x = 0, len = model.InitialDecisions.length; x < len; x++){
                        var curDecision = model.InitialDecisions[x];
                        
                        html.push(
                            '<li class="scriptDecision" decisionid="' + curDecision.DecisionID + '" parentscriptblockid="' + curDecision.ScriptBlockID + '">' +
                                '<span class="iconExpandCollapse decisionExpand"></span>' +
                                '<span class="decisionTitle">' + curDecision.DecisionTitle + '</span>' +
                                '<div class="scriptBlock hidden loading" scriptblockid="' + curDecision.ChildScriptBlockID +'"></div>' +
								'<button class="btnDelete">' +
            					    '<span class="generalIcons deleteIcon"></span>' +
                						'Delete' +
            					'</button>' +
                            '</li>');
                    }
                    
                    Response.Write(html.join(""));
                %>
                
                
                <% var additionalClass = (model.ScriptID == "new" ? "hidden" : "") 
                    if(model.ScriptID != "new" && model.ScriptID != ""){
                        Response.Write(
                            "<li class='scriptDecision addNew'>" +
                                "<button class='btnAddNewDecision'>Add New Decision</button>" +
                            "</li>"
                        );
                    }
                %>
            </ul>
    	</div>
	</div>
</div>
<%


%>

<script src="Content/Scripts/jquery.js" type="text/javascript"></script>
<script src="Content/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Content/Scripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
<script src="Content/Scripts/AdminScriptEditor.js" type="text/javascript"></script>
<script src="Content/Scripts/jQueryExtensions.js" type="text/javascript"></script>

<!-- templates -->
<script type="template" id="decisionTemplate">
	<li class="scriptDecision" decisionid="{newdecisionid}" parentscriptblockid="{parentscriptblockid}">
		<span class="iconExpandCollapse decisionExpand"></span>
		<span class="decisionTitle">{NewDecisionTitle}</span>
		{scriptBlockTemplate}
	    <button class="btnDelete">
        	<span class="generalIcons deleteIcon"></span>
            Delete
        </button>
	</li>
</script>


<script type="template" id="emptyDecisionTemplate">
	<li class="scriptDecision" decisionid="{DecisionID}" parentscriptblockid="{ScriptBlockID}">
		<span class="iconExpandCollapse decisionExpand"></span>
		<span class="decisionTitle">{DecisionTitle}</span>
		<button class="btnDelete">
        	<span class="generalIcons deleteIcon"></span>
            Delete
        </button>
		<div class="scriptBlock hidden loading" scriptblockid="{ChildScriptBlockID}"></div>
	</li>

</script>



<script type="template" id="scriptBlockTemplate">
	<div class="scriptBlock hidden" scriptblockid="{newscriptblockid}" parentdecisionid="{newdecisionid}">
		<div class="breadCrumb"></div>
		<label>Text:</label>
		<div class="scriptBlockMenu">
			<button class="btnEdit">
            	<span class="UIicons editIcon"></span>
                Edit
            </button>
            <button class="btnSave hidden">
            	<span class="generalIcons saveIcon"></span>
                Save
            </button>
            <button class="btnExit hidden" >
            	Exit Edit Mode
                <span class="generalIcons cancelIcon"></span>
            </button>
            <span class="needsSaved hidden">(Needs Saved)</span>
		</div>
		<div class="scriptText">
			{NewScriptText}
		</div>
		<br>
		<div class="decisionBlock">
			<span class="decisionBlockLabelExpandCollapse iconExpandCollapse decisionBlockLabelCollapse"></span>
			<label class="decisionBlockLabel">Decisions:</label> 
			<ul class="scriptDecisions">
				<li class="scriptDecision addNew">
					<button class="btnAddNewDecision">Add New Decision</button>
				</li>
			</ul>
		</div>
	</div>
</script>




</body>
</html>
